<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MarkLight is a framework for Unity that offers XUML a design language similar to HTML but instead of creating webpages it is used to design scenes in Unity.">
<meta name="keywords" content="marklight, markux, mvvm, unity, unity3d, mvm, mvp, mvc, ux, ui, user interface, user experience, interfaces, game, games, controls, widgets, xml, markup, framework, design, create, share, dream, build, play, dynamic, responsive, fluid, intuitive, easy, simple, powerful, sleek, elegant, structured, flow, creative">
<meta name="author" content="Ex Makina">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Introduction | MarkLight</title>
<script src="../js/html5shiv.js"></script>  <!-- support for HTML5 in IE8 -->
<!-- CSS file links -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap.icon-large.min.css" rel="stylesheet">
<link href="../css/style-documentation.css" rel="stylesheet" type="text/css" media="all" id="styleChange" />
<link href="../css/lightbox.css" type="text/css" rel="stylesheet" />
<link href="../css/responsive.css" type="text/css" rel="stylesheet" />
<link href="../css/vs.css" type="text/css" rel="stylesheet" />

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-76413937-1', 'auto');
  ga('send', 'pageview');

</script>

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}
</script>
</head>

<body>

    <!-- Sub-Header Start -->
    <header class="navbar navbar-fixed-top subNavBar" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
        <ul class="nav navbar-nav navbar-left subCategories">
            <li class="subCategorySelected"><a href="introduction.html" class="external">Introduction</a></li>
            <li><a href="tutorials.html">Tutorials</a></li>
            <li><a href="api/MarkLight.Views.Animate.html" class="external">API docs</a></li>            
        </ul>
        <span class="slackLeftOffset"><script async defer src="https://marklight.herokuapp.com/slackin.js"></script></span>
      </div><!-- /.navbar-collapse -->
    </header>

    <!-- Header Start -->
    <header class="navbar navbar-default navbar-fixed-top mainNavBar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://www.marklightforunity.com/"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="../index.html" class="external">Home</a></li>
                    <li><a href="https://www.assetstore.unity3d.com/#!/content/37466" class="external" onclick="trackOutboundLink('https://www.assetstore.unity3d.com/#!/content/37466'); return false;">Download</a></li>
                    <li class="current"><a href="introduction.html" class="current">Documentation</a></li>
                    <li><a href="https://www.patreon.com/studiodelight" class="external patreon"></a></li> 
                </ul>
            </div><!--/.navbar-collapse -->
      </div><!-- END Container -->
    </header><!-- END Header -->

    <!-- Documentation Start -->
    <a class="anchor" id="documentationAnchor"></a>
    <section id="documentation" class="marginSubMenu">
      <div class="container">
        <div class="row">
          <div class="col-lg-9"> 
            <h1>What is MarkLight?</h1>
            <br>
            MarkLight is a markup extension framework for Unity that offers <b>XUML</b> a markup language (like HTML/XAML) used to create <b>views</b> in your scene (UI, meshes, lights, cameras, etc) and connect them to the underlying game logic. The views you create can then easily be combined, extended, styled, shared and customized to your wants.<br>
            <br>

            <h1>Getting Started</h1>
            <br>
            I recommend you start by following the <a href="tutorials/gettingstarted.html">Getting Started with MarkLight</a> where you can learn the fundamentals through the process of creating a main game menu. Be sure to check out the <a href="tutorials.html">tutorials</a> and <a href="api/MarkLight.Views.Animate.html">API docs</a>.<br>
            <br>
            <h1>Conversation &amp; Support</h1>                        
            <br>            
            If you want to connect, converse and ask for help:<br><br>
            <ul>
              <li>Join MarkLight chat on Slack:<br><script async defer src="https://marklight.herokuapp.com/slackin.js?large"></script><br><br></li>
              <li>Subscribe to the <a href="https://www.reddit.com/r/marklight">MarkLight Subreddit</a> for announcements and discussions<br><br></li>
              <li>Leave a rating/review on the <a href="https://www.assetstore.unity3d.com/en/#!/content/37466">Asset Store page</a></li>
            </ul>              
            <br>

            <h1>Latest Announcements</h1>
            <br>
            <a href="news/marklight-2.7.0-released.html">MarkLight 2.7.0 Released!</a> Jan 10, 2017<br>
            <a href="news/marklight-2.6.0-released.html">MarkLight 2.6.0 Released!</a> Sep 9, 2016<br>
            <a href="news/marklight-2.5.0-released.html">MarkLight 2.5.0 Released!</a> Aug 23, 2016<br>
            <a href="news/marklight-2.4.1-released.html">MarkLight 2.4.1 Released!</a> Jul 1, 2016<br>
            <a href="news/marklight-2.3.0-released.html">MarkLight 2.3.0 Released!</a> May 25, 2016<br>
            <a href="news/marklight-2.2.0-released.html">MarkLight 2.2.0 Released!</a> May 10, 2016<br>
            <a href="tutorials/resource-dictionaries.html">Added Resource Dictionary tutorial</a> May 9, 2016<br>
            <a href="tutorials/state-management.html">Added State Management tutorial</a> May 1, 2016<br>
            <a href="tutorials/animations.html">Added Creating Animations tutorial</a> April 30, 2016<br>
            <a href="tutorials/themes-and-styles.html">Added Themes and Styles tutorial</a> April 30, 2016<br>
            <a href="news/marklight-2.1.0-released.html">MarkLight 2.1.0 Released!</a> April 27, 2016<br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          </div>
        </div> <!-- END OF ROW -->
      </div> <!-- END OF CONTAINER -->
    </section>


    <!-- Start subscription box -->
    <section id="promoBox">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h4><span>Join the Announcement List</span></h4>
            <p>Be notified when new themes, views, tutorials and updates are available</p>
          </div>
          <div class="col-lg-6">
            <form method="post" name="subscribeForm" id="subscribeForm" action="http://scripts.dreamhost.com/add_list.cgi">
                <input type="hidden" name="list" value="news" />
                <input type="hidden" name="domain" value="markux.com" />
                <input type="text" name="email" id="emailInput" placeholder="your email here" /> 
                <input type="submit" name="submit" id="subscribeButton" value="Subscribe" /> 
            </form>

          </div>
        </div><!-- END Row -->
      </div><!-- END container -->
    </section><!-- END Promo box -->

    <footer>
      <div class="container">
        <div class="row footer-info">
          <div class="col-lg-5">
            <img src="../images/exmakina.png" alt="company logo" />
          </div>
          <div class="col-lg-3 contact">
            <ul>
              <li><img src="../images/icons/footerMail.png" alt="mail icon" /><a href="mailto:contact@marklightforunity.com "> contact@marklightforunity.com </a></li> 
            </ul>                
          </div>
          <div class="col-lg-4">
            <ul class="socialIcons footer-social socialIconsOffset">
                <li><a href="https://twitter.com/MarkUX" onclick="trackOutboundLink('https://twitter.com/MarkUX'); return false;" class="twitterIcon" target="_blank"></a></li>
                <li><a href="http://www.reddit.com/r/marklight" onclick="trackOutboundLink('http://www.reddit.com/r/marklight'); return false;" class="redditIcon" target="_blank"></a></li>
                <li><span class="slackOffset"><script async defer src="https://marklight.herokuapp.com/slackin.js"></script></span></li>
            </ul>
          </div>
        </div><!-- END Row -->
      </div><!-- END Container -->
    </footer><!-- END Footer -->
    
<!-- JavaScript file links -->
<script src="../js/jquery.js"></script>            <!-- Jquery -->
<script src="../js/bootstrap.min.js"></script>     <!-- bootstrap -->
<script src="../js/jquery.bxslider.min.js"></script>  <!-- bxslider -->
<script src="../js/tabs.js"></script> <!-- custom tab script -->
<script src="../js/lightbox-2.6.min.js"></script>  <!-- lightbox -->
<script src="../js/jquery.scrollTo.js"></script>  <!-- scollTo -->
<script src="../js/jquery.nav.js"></script>  <!-- one page nav -->
<script src="../js/respond.js"></script>
<script src="../js/highlight.pack.js"></script>

<script>
  "use strict";

$(document).ready(function() {
    hljs.initHighlightingOnLoad();
    $('.nav.navbar-nav.navbar-right').onePageNav({
        currentClass: 'current',
        filter: ':not(.external)'
    }); 
});
</script>

</body>
</html>
